<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>歌手详情页</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/module/appendID.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/singersDetail.js"></script>
    <link rel="stylesheet" href="./css/common/reset.css">
    <!-- <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="./css/common/common.css">
    <link rel="stylesheet" href="./css/base/base.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="shortcut icon" href="./resource/static/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/common/singersDetail.css">
</head>

<body>
    <!-- 头部部分 -->
    <header></header>
    <main>
        <div class="g-bd4 f-cb">

            <div class="g-mn4">
                <div class="g-mn4c">
                    <div class="g-wrap6">
                        <div class="m-info f-cb">

                            <div class="g-name">
                                <script id="top" type="text/html">
                                    <p>{{ data.name }}</p>
                                    <img src="{{ data.picUrl }}"
                                        alt="">
                                </script>

                            </div>


                            <div class="cnt">
                                <div class="cntc">

                                    <div class="btns f-cb">
                                        <a class="u-btn2 u-btn2-2 u-btni-addply f-fl" hidefocus="true" title="播放">
                                            <i><em class="ply"></em>播放</i></a>
                                        <a class="u-btni u-btni-add" hidefocus="true" title="添加到播放列表"></a>
                                        <a class="u-btni u-btni-fav "><i>收藏</i></a>
                                    </div>
                                </div>
                            </div>
                        </div>




                        <div class="n-songtb">
                            <div class="u-title u-title-1 f-cb">
                                <h3><span class="f-ff2">歌曲列表</span></h3>

                            </div>


                            <div class="j-flag">
                                <table class="m-table m-table-album">
                                    <thead>
                                        <tr>
                                            <th class="first w1">
                                                <div class="wp">&nbsp;</div>
                                            </th>
                                            <th>
                                                <div class="wp">歌曲标题</div>
                                            </th>
                                            <!-- <th class="w2-1">
                                                <div class="wp">歌曲图片</div>
                                            </th> -->
                                            <th class="w4">
                                                <div class="wp">歌手</div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="songLists">
                                        <script type="text/html" id="tpl">
                                            <% data.forEach(function (item, index) {%>
                                                <% let str = index % 2== 0 || index == 0; %>
                                                <% let flat = str ? even : ''; %>
                                                <tr class="<%= flat%> ">
                                                    <td class="left">
                                                        <div class="hd ">
                                                            <span class="ply ">&nbsp;</span>
                                                            <span class="num"><%=index%></span>
                                                        </div>
                                                    </td>
                                                    <td class="">
                                                        <div class="f-cb">
                                                            <div class="tt">
                                                                <div class="ttc"><span class="txt">
                                                                        <a href="#"><b><%=item.al.name%></b></a>
                                                                        <span class="mv">MV</span></span></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <!-- <td class="">
                                                        <img src="<%= item.al.picUrl%> " alt="" style='width: 30px; height:27px'>
                                                    </td> -->
                                                    <td class="">
                                                        <div class="text">
                                                            <span><a class="reName" href="#"><%= item.name%></a>
                                                            </span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            <% }) %>
                                        </script>


                                    </tbody>
                                </table>
                            </div>
                            <div class="j-flag"></div>


                        </div>



                    </div>
                </div>
            </div>

            <div class="g-sd4">
                <div class="g-wrap7">

                    <h3 class="u-hd3">
                        <span class="f-fl">Ta的其他热门专辑</span>
                        <a href="#" class="more f-ff1 s-fc3">全部&gt;</a>
                    </h3>

                    <ul class="m-more">
                        <li>
                            <a class="cver ">
                                <img
                                    src="http://p1.music.126.net/kkO6WvKl9glH6zsOMXInbg==/109951166217866962.jpg?param=50y50">

                            </a>

                            <div class="info">
                                <p class="f-thide"><a class="sname" href="#">无双的王者</a></p>
                                <p class="f-time">2021-07-27</p>
                            </div>
                        </li>

                        <li>
                            <a class="cver ">
                                <img
                                    src="https://p4.music.126.net/wWpqrff9yDjKDWXyPbAHaA==/109951166170660599.jpg?param=200y200">

                            </a>

                            <div class="info">
                                <p class="f-thide"><a class="sname" href="#">无双的王者</a></p>
                                <p class="f-time">2021-07-27</p>
                            </div>
                        </li>

                        <li>
                            <a class="cver ">
                                <img
                                    src="http://p1.music.126.net/kkO6WvKl9glH6zsOMXInbg==/109951166217866962.jpg?param=50y50">

                            </a>

                            <div class="info">
                                <p class="f-thide"><a class="sname" href="#">无双的王者</a></p>
                                <p class="f-time">2021-07-27</p>
                            </div>
                        </li>

                    </ul>

                </div>
            </div>
    </main>
    <!-- footer页面 -->
    <footer></footer>
</body>

</html>